<!--  -->
<template>
  <div class="home">
      <div class="toolbar">
          <toolbar></toolbar>
          
      </div>
      <main>
          <section class="left-opt">
              <i class="el-icon-edit own-btn" draggable="true" 
              @dragstart="drag($event,1)" @dragover.prevent @dragend="dragend($event,1)">文字</i>
              <i class="el-icon-data-board own-btn">矩形</i>
          </section>
          <section class="the-canvas">
              <div class="the-canvas-con" ref="canRefs">
                 <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
                        <path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(207, 207, 207, 0.3)" stroke-width="1"/>
                        </pattern>
                        <pattern id="grid" width="50" height="50" patternUnits="userSpaceOnUse">
                        <rect width="50" height="50" fill="url(#smallGrid)"/>
                        <path d="M 50 0 L 0 0 0 50" fill="none" stroke="rgba(186, 186, 186, 0.5)" stroke-width="1"/>
                        </pattern>
                    </defs>
                    <rect width="100%" height="100%" fill="url(#grid)" />
                 </svg> 
                 <div v-for="(item,index) in componentData" :key="index"
                 @mousedown="mousedown($event)" @mouseup="mouseup($event)">
                    <textedit :clientX="item.clientX" :clientY="item.clientY" :label="item.label"/>
                 </div>
              </div>
          </section>
          <section class="right-opt"></section>
      </main>
  </div>
</template>

<script>
import toolbar from '../components/toolbar.vue';
import textedit from '../components/input.vue';
export default {
  components: {toolbar,textedit},
  data () {
    return {
        componentData:[],
        moveStyle:{}
    };
  },

//   computed: {},

//   mounted: {},

  methods: {
     drag(e,type){
        
     },

     //鼠标按下移动组件
     mousedown(e){
        let startX = e.clientX;
        let startY = e.clientY;
        var _target = e.target

        let sb_bkX = startX-e.target.offsetLeft;
        let sb_bkY = startY-e.target.offsetTop;

        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;
        }
        document.onmousemove = function(ev) {
            var endx=ev.clientX-sb_bkX;
            var endy=ev.clientY-sb_bkY;
            _target.style.left = endx + 'px';
            _target.style.top = endy+'px';
        }
     },
     mouseup(e){
        document.onmousemove = null;
     },
     dragend(e,type){
        let clientX = e.clientX;
        let clientY = e.clientY;
        let opt = {
            label:'请输入文字',
            clientY:clientY,
            clientX:clientX
            // styleCss:{
            //     'width':100+'px',
            //     'height':33+'px',
            //     'font-size':14+'px',
            //     'text-align':'center',
            //     'top':(clientY-97)+'px',
            //     'left':(clientX-233)+'px',
            //     'line-height':33+'px', 
            //     'position':'absolute',
            //     'border': '1px solid rgb(186 86 86)',
            //     'cursor': 'all-scroll'
            // }
        }
        this.componentData.push(opt);
     }
  }
}

</script>
<style lang='less' scoped>
    .home {
        height: 100vh;
        .toolbar{
            height: 64px;
            line-height: 64px;
            text-align: left;
            border-bottom: 1px solid #ddd;
            padding: 0 10px;
            box-sizing: border-box;
        }
        main{
            height: calc(100% - 64px);
            position: relative;
            .left-opt{
                width: 200px;
                height: 100%;
                top: 0;
                position: absolute;
            }
            .the-canvas{
                background: #f5f5f5;
                margin-left: 200px;
                margin-right: 262px;
                height: 100%;
                padding: 20px;
                box-sizing: border-box;
                .the-canvas-con{
                    background-color: white;
                    height: 100%;
                    width: 100%;
                    overflow: hidden;
                    position: relative;
                }
            }
            .right-opt{
                width: 262px;
                height: 100%;
                top: 0;
                position: absolute;
                right: 0;
            }
        }
    }
    .own-btn{
        cursor: grab;
        border: 1px solid #ddd;
        width: 40%;
        padding: 8px 5px;
        margin-top: 10px;
        float: left;
        margin-left: 2.5%;
    }
</style>